.message{
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
}

.friend-list{
    width: 100%;
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 50px);
}
.friend-item{
    display: flex;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 1px 1px 2px 2px #ccc;
    .user-head{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border:solid 2px orangered;
        margin-right: 10px;
    }
    .msg-top,.msg-bottom{
        &>*{
            margin: 0;
        }
    }
    .msg-top{
        margin-right: auto;
        width: 120px;
        box-sizing: border-box;
        line-height: 16px;
        .uname{
            font-size: 16px;
            font-weight: 700;
            color: #666;
        }
        .last-msg{
            font-size: 12px;
            color: #999;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .msg-bottom{
        display: inline-flex;
        flex-direction: column;
        text-align: center;
        .last-time{
            color: #ccc;
            font-size: 10px;
            font-weight: 900;
        }
        .msg-count{
            width: 22px;
            line-height: 22px;
            background-color: orangered;
            color: #fff;
            font-weight: 900;
            font-size: 12px;
           
            border-radius: 50%;
            margin-left: auto;
        }
    }
}

.friend-blank{
    width: 100%;
    line-height: 100px;
    text-align: center;
    margin: 100px 0;
    font-size: 16px;
}

.item{
    display:flex;
    margin-bottom: 10px;
    align-items: center;
}
.item-img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #FF8F35;
    margin-right: 15px;
}
.name{
    color: #545456;
    font-size: 14px;
    display: inline-block;
    font-weight: bold;
}
.item-msg{
    flex-grow: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE4;
}


.time{
    display: inline-block;
    font-size: 10px;
    color: #97989A;
}
.msg{
    display: inline-block;
    font-size: 10px;
    color: #D0D0D4;
}
.num{
    display: inline-block;
    width: 22px;
    height: 13px;
    line-height: 13px;
    text-align: center;
    font-size: 8px;
    border-radius:6.5px ;
    color: #fff;
    background-color: #FF8F35;
}